import React from 'react'
import PropTypes from 'prop-types'
import { Form, Modal, Select, Row, Col, InputNumber, Icon, Input } from 'antd'
import { SelectProps } from 'utils'
import style from './hr.less'

const FormItem = Form.Item
const Option = Select.Option
const { TextArea } = Input

const formItemLayout = {
  labelCol: {
    span: 10,
  },
  wrapperCol: {
    span: 14,
  },
}
const memoLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 19,
  },
}
const modal = ({
  item = {},
  onOk,
  currenciesData,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
  handleChange,
  ...modalProps
}) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        ID: item.ID,
      }
      onOk(data)
    })
  }
  let fieldsValue = getFieldsValue()
  let showFormFalg = false
  let currencyCodeFromValue = fieldsValue.currencyCodeFrom
  let currencyCodeToValue = fieldsValue.currencyCodeTo

  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }
  if (currencyCodeFromValue && currencyCodeToValue) {
    showFormFalg = true
  }
  const typeData = currenciesData.map(d => <Option key={d.code}>{d.code}</Option>)
  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <Row>
          <Col span={12}>
            <FormItem label="currencyFrom" hasFeedback {...formItemLayout}>
              {getFieldDecorator('currencyCodeFrom', {
                initialValue: item.currencyCodeFrom,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Select style={{ width: '100%' }} {...SelectProps}>{ typeData }</Select>)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="currencyTo" hasFeedback {...formItemLayout}>
              {getFieldDecorator('currencyCodeTo', {
                initialValue: item.currencyCodeTo,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Select style={{ width: '100%' }} {...SelectProps}>{typeData}</Select>)}
            </FormItem>
          </Col>
        </Row>
        {showFormFalg && (<div>
          <Row className={style.FromandTo}>
            {currencyCodeFromValue}
            <Icon type="swap-right" />
            {currencyCodeToValue}
            <hr className={style.modalcutLine} />
          </Row>
          <Row>
            <Col span={12}>
              <FormItem label="buyingBankRate" {...formItemLayout}>
                {getFieldDecorator('buyingBankRate1', {
                  initialValue: item.buyingBankRate1,
                  rules: [
                    {
                      required: true,
                    },
                  ],
                })(<InputNumber style={{ width: '100%' }} />)}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="buyingRate" {...formItemLayout}>
                {getFieldDecorator('buyingRate1', {
                  initialValue: item.buyingRate1,
                  rules: [
                    {
                      required: true,
                    },
                  ],
                })(<InputNumber step={0.1} style={{ width: '100%' }} />)}
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <FormItem label="sellingBankRate" {...formItemLayout}>
                {getFieldDecorator('sellingBankRate1', {
                  initialValue: item.sellingBankRate1,
                  rules: [
                    {
                      required: true,
                    },
                  ],
                })(<InputNumber step={0.1} style={{ width: '100%' }} />)}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="sellingRate" {...formItemLayout}>
                {getFieldDecorator('sellingRate1', {
                  initialValue: item.sellingRate1,
                  rules: [
                    {
                      required: true,
                    },
                  ],
                })(<InputNumber step={0.1} style={{ width: '100%' }} />)}
              </FormItem>
            </Col>
          </Row>
          <Row className={style.FromandTo}>
            {currencyCodeToValue}
            <Icon type="swap-right" />
            {currencyCodeFromValue}
            <hr className={style.modalcutLine} />
          </Row>
          <Row>
            <Col span={12}>
              <FormItem label="buyingBankRate" {...formItemLayout}>
                {getFieldDecorator('buyingBankRate2', {
                  initialValue: item.buyingBankRate2,
                  rules: [
                    {
                      required: true,
                    },
                  ],
                })(<InputNumber step={0.1} style={{ width: '100%' }} />)}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="buyingRate" {...formItemLayout}>
                {getFieldDecorator('buyingRate2', {
                  initialValue: item.buyingRate2,
                  rules: [
                    {
                      required: true,
                    },
                  ],
                })(<InputNumber step={0.1} style={{ width: '100%' }} />)}
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <FormItem label="sellingBankRate" {...formItemLayout}>
                {getFieldDecorator('sellingBankRate2', {
                  initialValue: item.sellingBankRate2,
                  rules: [
                    {
                      required: true,
                    },
                  ],
                })(<InputNumber step={0.1} style={{ width: '100%' }} />)}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="sellingRate" {...formItemLayout}>
                {getFieldDecorator('sellingRate2', {
                  initialValue: item.sellingRate2,
                  rules: [
                    {
                      required: true,
                    },
                  ],
                })(<InputNumber step={0.1} style={{ width: '100%' }} />)}
              </FormItem>
            </Col>
          </Row>
          <hr className={style.modalcutLine} />
          <Row>
            <Col>
              <FormItem label="memo" {...memoLayout}>
                {getFieldDecorator('memo', {
                  initialValue: item.memo,
                })(<TextArea />)}
              </FormItem>
            </Col>
          </Row>
        </div>)}
      </Form>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
  currenciesData: PropTypes.array,
  handleChange: PropTypes.func,
}

export default Form.create()(modal)
